<template>
  <div :ref="'radarChart'" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts/core';
import {RadarChart} from 'echarts/charts';
import {GridComponent, TooltipComponent} from 'echarts/components';
import {CanvasRenderer} from 'echarts/renderers';

echarts.use([TooltipComponent, GridComponent, RadarChart, CanvasRenderer]);

export default {
  props: ['chartData'], // 定义接收父组件传递的数据

  mounted() {
    this.renderRadarChart();
  },

  watch: {
    chartData: function (newData) {
      // 监听父组件传递的数据变化，并更新雷达图
      this.updateRadarChart(newData);
    }
  },

  methods: {
    renderRadarChart() {
      const chartDom = this.$refs.radarChart;
      chartDom.style.width = '550px';
      chartDom.style.height = '350px';
      this.myChart = echarts.init(chartDom);

      this.updateRadarChart(this.chartData); // 初始化时渲染雷达图
    },

    updateRadarChart(data) {
      const option = {
        tooltip: {},
        radar: {
          indicator: [
            {name: '认知', max: 100},
            {name: '创新', max: 100},
            {name: '实践', max: 100},
            {name: '表达', max: 100},
            {name: '批判', max: 100}
          ]
        },
        series: [{
          name: '能力分数',
          type: 'radar',
          data: [{
            value: data
          }]
        }]
      };

      this.myChart.setOption(option);
    }
  }
}
</script>
